import { ipcRenderer } from "electron";
<template>
  <div class="device-config">
    <div class="shown-config">
      <xx-checkbox v-model="configs.control">电脑控制</xx-checkbox>
      <xx-checkbox v-model="configs.fixed">窗口置顶</xx-checkbox>
      <xx-checkbox v-model="configs.screen">关闭手机屏幕</xx-checkbox>

      <div class="opr-buttons">
        <i v-if="offline" @click="reconnect" class="opr-button iconfont icon-connect" title="重连"></i>
        <i @click="openDevice" class="opr-button iconfont icon-zhifeiji" title="打开镜像"></i>
        <i @click="showMore = !showMore" class="opr-button iconfont icon-setting" title="更多设置"></i>
      </div>
    </div>

    <div class="more-config" :style="{ height: showMore ? '330px' : 0 }">
      <div class="config-item">
        <span class="item-label"></span>
        <div class="item-content">
          <xx-checkbox v-model="configs.touch">显示点按操作反馈</xx-checkbox>
          <br />
          <xx-checkbox v-model="configs.render">渲染所有帧,可能会延迟</xx-checkbox>
        </div>
      </div>
      <div class="config-item">
        <label>
          <span class="item-label">窗口标题</span>
          <input v-model="configs.title" class="item-content xx-input" type="text" placeholder="默认为手机型号" />
        </label>
      </div>
      <div class="config-item">
        <span class="item-label"></span>
        <span class="item-content">
          <xx-checkbox v-model="configs.record.open" style="margin-right: 20px">镜像录屏</xx-checkbox>
          <xx-checkbox v-model="configs.record.openMirror" :disabled="!configs.record.open">录屏时打开镜像</xx-checkbox>
        </span>
      </div>
      <div class="config-item">
        <label>
          <span class="item-label">录屏文件路径</span>
          <input
            v-model="configs.record.filepath"
            :disabled="!configs.record.open"
            class="item-content xx-input"
            type="text"
            placeholder="路径包括文件名,视频格式为.mkv"
          />
        </label>
      </div>
      <div class="config-item">
        <label>
          <span class="item-label">镜像传输比特率</span>
          <input v-model.number="configs.bitRate" class="item-content xx-input" type="number" max="1024" min="0" />
        </label>
      </div>
      <div class="config-item">
        <label>
          <span class="item-label">等比最大分辨率</span>
          <input v-model.number="configs.maxSize" class="item-content xx-input" type="number" max="1920" min="0" />
        </label>
      </div>
      <div class="config-item">
        <label>
          <span class="item-label">剪切屏幕</span>
          <span class="item-content config-crop">
            <input v-model.number="configs.crop.x" type="number" min="0" class="xx-input" placeholder="横坐标" />
            <input v-model.number="configs.crop.y" type="number" min="0" class="xx-input" placeholder="纵坐标" />
            <br />
            <input v-model.number="configs.crop.width" type="number" min="0" class="xx-input" placeholder="宽度" />
            <input v-model.number="configs.crop.height" type="number" min="0" class="xx-input" placeholder="高度" />
          </span>
        </label>
      </div>

      <div class="config-item">
        <span class="item-label"></span>
        <span class="item-content">
          <button @click="resetToDefault" class="xx-button">恢复默认设置</button>
          <button @click="showMore = false" class="xx-button">收起</button>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop } from 'vue-property-decorator';
import { VueComponent } from '@/vue/vue-component';
import XxCheckbox from '@/components/common/xx-checkbox';
import { getDefaultConfig } from '@/util/device-utils';
import { DeviceConfiguration } from '@/type/typings';
import { ipcRenderer } from 'electron';
import { AndroidDevice } from '@/main/adb/android-device';

@Component({
  name: 'device-config',
  components: { XxCheckbox }
})
export default class DeviceConfig extends VueComponent {
  @Prop({ type: Object, required: true }) readonly device!: AndroidDevice;
  /** 设备是否离线 */
  @Prop(Boolean) readonly offline!: boolean;

  configs: DeviceConfiguration = getDefaultConfig();
  showMore = false;

  @Emit('reconnect')
  private emitReconnectEvent(event: MouseEvent) {
    return event;
  }

  @Emit('open')
  private emitOpenEvent(event: MouseEvent) {
    return event;
  }

  reconnect() {
    ipcRenderer.on('reconnected-device', this.reconnectCallback);
    ipcRenderer.send('reconnect-device', { deviceId: this.device.id });
  }

  reconnectCallback() {
    ipcRenderer.removeListener('reconnected-device', this.reconnectCallback);
  }

  openDevice() {
    ipcRenderer.send('open-device', { config: this.configs, device: this.device });
  }

  resetToDefault() {
    this.configs = getDefaultConfig();
  }
}
</script>

<style lang="less">
@import '~@/assets/styles/variables.less';

.device-config {
  margin-top: 10px;
  font-size: 12px;
  padding: 0 10px 10px;
}

.shown-config {
  .xx-checkbox {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.opr-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .opr-button {
    font-size: 20px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-left: 10px;
    transition: all 0.2s;

    &:hover {
      cursor: pointer;
      color: @color-primray;
    }

    &.icon-connect {
      position: relative;
      z-index: 2;
      color: @global-font-color;
    }
  }
}

.more-config {
  height: 0;
  overflow: hidden;
  transition: all 0.2s;
  box-sizing: border-box;
}

.config-item {
  display: flex;
  box-sizing: border-box;
  padding: 5px 0;

  > label {
    flex: 1;
    display: flex;
  }

  .item-label {
    width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 25px;
    box-sizing: border-box;
    padding-right: 10px;
    flex-shrink: 0;
    text-align: right;
  }

  .item-content {
    flex: 1;

    button {
      margin-right: 10px;
    }
  }
}

.config-crop {
  .xx-input {
    width: 100px;
    margin: 0 10px 5px 0;
  }
}
</style>
